<template>
	<view class="rating-page">
		<!-- 自定义头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						我的评分
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 评分信息卡片 -->
		<view class="score-card">
			<view class="score-header">
				<view class="score-icon">
					<text class="cuIcon-selection"></text>
				</view>
				<view class="score-info">
					<view class="score-label">信誉分</view>
					<view class="score-value">{{totalScore}}</view>
				</view>
			</view>
			
			<!-- 评分等级指示器 -->
			<view class="score-level">
				<view class="level-bar">
					<view class="level-progress" :style="{ width: getScorePercentage() + '%' }"></view>
				</view>
				<view class="level-text">{{getScoreLevel()}}</view>
			</view>
		</view>

		<!-- 警告提示 -->
		<view v-if="totalScore < 60" class="warning-tip">
			<view class="warning-icon">
				<text class="cuIcon-warn"></text>
			</view>
			<view class="warning-content">
				<view class="warning-title">信誉积分过低</view>
				<view class="warning-desc">信誉积分低于 60 将限制接单，可联系客服申述</view>
			</view>
		</view>

		<!-- 评分记录列表 -->
		<view class="rating-list-container">
			<!-- 加载状态 -->
			<view v-if="loading && orderCommentList.length === 0" class="loading-container">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>

			<!-- 空状态 -->
			<view v-else-if="!loading && orderCommentList.length === 0" class="empty-container">
				<view class="empty-icon">
					<text class="cuIcon-selection"></text>
				</view>
				<view class="empty-text">暂无评分记录</view>
				<view class="empty-desc">您的评分记录将在这里显示</view>
			</view>

			<!-- 评分列表 -->
			<view v-else class="rating-list">
				<ratingListvue :type='TabCur' :orderCommentList="orderCommentList"></ratingListvue>
			</view>

			<!-- 加载更多 -->
			<view v-if="orderCommentList.length > 0" class="load-more-container">
				<uni-load-more 
					:status="loadMoreStatus" 
					:content-text="loadingText"
					@clickLoadMore="loadMore">
				</uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import ratingListvue from '@/pages/mePages/components/ratingList.vue';
	import storage from '@/utils/storage';
	import {
		orderComment
	} from "@/api/mine.js"
	
	export default {
		components: {
			headerSlotVue,
			ratingListvue
		},
		data() {
			return {
				loading: false,
				totalScore: 100,
				orderCommentList: [],
				pages: {
					page: 1,
					limit: 10,
				},
				noMoreData: false,
				totalPages: 0,
				TabCur: 0,
				scrollLeft: 0,
				userInfo: {},
				loadMoreStatus: 'more',
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
			this.init()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			async init() {
				if (this.orderCommentList.length >= this.totalPages * this.pages.limit && this.totalPages > 0) {
					return
				}
				
				try {
					this.loading = true
					uni.showLoading({
						mask: true,
						title: "加载中..."
					})
					
					let params = {
						id: this.userInfo._id,
						data: this.pages
					}
					
					const res = await orderComment(params)
					
					if (this.orderCommentList.length > 0) {
						this.orderCommentList = [...this.orderCommentList, ...res.data.data.history]
					} else {
						this.orderCommentList = res.data.data.history
					}
					
					this.total = res.data.data.pagination.total || 0
					this.totalScore = res.data.data.user.currentScore || 100
					this.totalPages = Math.ceil(this.total / this.pages.limit)
					this.noMoreData = this.pages.page >= this.totalPages
					
					this.updateLoadMoreStatus()
				} catch (error) {
					console.error('获取评分记录失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}
			},
			
			async refresh() {
				this.orderCommentList = []
				this.pages = {
					page: 1,
					limit: 10
				}
				this.noMoreData = false
				await this.init()
			},
			
			async loadMore() {
				if (this.noMoreData || this.loading) return
				
				this.pages.page++
				await this.init()
			},
			
			updateLoadMoreStatus() {
				if (this.orderCommentList.length >= this.totalPages * this.pages.limit && this.totalPages > 0) {
					this.loadMoreStatus = 'noMore'
					this.noMoreData = true
				} else if (this.orderCommentList.length === 0) {
					this.loadMoreStatus = 'more'
				} else {
					this.loadMoreStatus = 'more'
				}
			},
			
			getScorePercentage() {
				return Math.min(100, Math.max(0, this.totalScore))
			},
			
			getScoreLevel() {
				if (this.totalScore >= 90) return '优秀'
				if (this.totalScore >= 80) return '良好'
				if (this.totalScore >= 70) return '一般'
				if (this.totalScore >= 60) return '及格'
				return '不及格'
			},

			closePage() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rating-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;
		
		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;
			
			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}
		
		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.score-card {
		background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
		margin: 32rpx;
		border-radius: 20rpx;
		padding: 40rpx 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(254, 97, 0, 0.3);
		
		.score-header {
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			
			.score-icon {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				
				.cuIcon-selection {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
			
			.score-info {
				flex: 1;
				
				.score-label {
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.9);
					margin-bottom: 8rpx;
				}
				
				.score-value {
					font-size: 48rpx;
					color: #FFFFFF;
					font-weight: 700;
				}
			}
		}
		
		.score-level {
			.level-bar {
				height: 8rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 4rpx;
				overflow: hidden;
				margin-bottom: 16rpx;
				
				.level-progress {
					height: 100%;
					background: #FFFFFF;
					border-radius: 4rpx;
					transition: width 0.3s ease;
				}
			}
			
			.level-text {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.9);
				text-align: center;
			}
		}
	}

	.warning-tip {
		background: #fff3cd;
		border: 1rpx solid #ffeaa7;
		border-radius: 16rpx;
		margin: 0 32rpx 32rpx;
		padding: 24rpx;
		display: flex;
		align-items: flex-start;
		
		.warning-icon {
			margin-right: 16rpx;
			margin-top: 4rpx;
			
			.cuIcon-warn {
				font-size: 32rpx;
				color: #f39c12;
			}
		}
		
		.warning-content {
			flex: 1;
			
			.warning-title {
				font-size: 28rpx;
				color: #856404;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.warning-desc {
				font-size: 24rpx;
				color: #856404;
				line-height: 1.4;
			}
		}
	}

	.rating-list-container {
		padding: 0 32rpx;
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		
		.empty-icon {
			margin-bottom: 32rpx;
			
			.cuIcon-selection {
				font-size: 120rpx;
				color: #c0c4cc;
			}
		}
		
		.empty-text {
			font-size: 32rpx;
			color: #606266;
			margin-bottom: 16rpx;
		}
		
		.empty-desc {
			font-size: 28rpx;
			color: #909399;
		}
	}

	.rating-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.load-more-container {
		margin-top: 32rpx;
		text-align: center;
	}
</style>